<template>
	<view style="display: flex; flex-direction: column; align-items: center;height: 100vh;">
		<!-- 搜索栏 -->
		<!-- <view style="width: 702rpx;height: 50rpx;border-radius: 25rpx;background-color: #F5F5F5; display: flex;align-items: center;">
			<image mode="aspectFill" src="../static/home/search.png" style="width: 34rpx;height: 34rpx;margin-left: 49rpx;"></image>
			<view style="width: 1px;height: 32rpx;background-color: #E0E0E0;margin-left: 28rpx;"></view>
			<input placeholder="搜索科目 教练" placeholder-class="inputclass" confirm-type="search" style="margin-left: 31rpx;font-size: 24rpx;" />
		</view> -->

		<!-- 筛选栏 -->
		<view style="display: flex;justify-content: space-around;align-items: center;margin-top: 19rpx; width: 702rpx;">
			<!-- 新车二手车 第一个选项 -->
			<view style="display: flex;align-items: center;">
				<picker mode="selector" @change="carStyleChange" :range="carStyleList" :range-key="'name'">
					<view style="font-size: 26rpx;color: #666666;" >{{carTypeName}}</view>
				</picker>
				<image mode="aspectFill" src="../static/lookcar/down.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;"></image>
			</view>
			
			
			<!-- 筛选 车型 -->
			<view style="display: flex;align-items: center;">
				<picker mode="selector" @change="carTabChange" :value="carTableIndex" :range="carTableList" :range-key="'name'">
					<view style="font-size: 26rpx;color: #666666;">{{ carTableList[carTableIndex].name }}</view>
				</picker>
				<image mode="aspectFill" src="../static/lookcar/down.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;"></image>
			</view>
			
			<!-- 筛选 座位数量 -->
			<view style="display: flex;align-items: center;">
				<picker mode="selector" @change="carSeatTabChange" :value="seatTabIndex" :range="seatTableList" :range-key="'name'">
					<view style="font-size: 26rpx;color: #666666;">{{ seatTableList[seatTabIndex].name }}</view>
				</picker>
				<image mode="aspectFill" src="../static/lookcar/down.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;"></image>
			</view>
			
			
			<!-- 排序 -->
			<view  @click="changeTimeSort" style="display: flex;align-items: center;">
				<view style="font-size: 26rpx;color: #666666;">上市时间</view>
				<view style="display: flex;flex-direction: column;">
					<image v-if="gettimesort == 0" mode="aspectFill" src="../static/lookcar/up.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;"></image>
					<image v-if="gettimesort == 1" mode="aspectFill" src="../static/lookcar/down.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view @click="changePricesort" style="display: flex;align-items: center;">
				<view style="font-size: 26rpx;color: #666666;">价格</view>
				<view style="display: flex;flex-direction: column;">
					<image v-if="pricesort == 0" mode="aspectFill" src="../static/lookcar/up.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;"></image>
					<image v-if="pricesort == 1" mode="aspectFill" src="../static/lookcar/down.png" style="width: 10rpx;height: 6rpx;margin-left: 8rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 车辆列表 -->
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			:style="{width:width + 'px'}"
			style="margin-top: 30rpx; display: flex;flex-direction: column; align-items: center;height: 100vh;"
		>
		<!-- 车辆 -->
		<view class="look_car" @tap="goCar(item.id,'fuwuxiangqing')" v-for="(item, index) in carList" :key="index">
			<view class="look_car_log"></view>
			<view class="look_car_con">
				<view class="look_car_box">
					<image :src="item.image" mode="aspectFill" style="width: 232rpx; height: 130rpx;"></image>
					<view class="look_car_right">
						<text>{{ item.title }}</text>
						<view class="look_car_price">
							<text class="t-price">{{item.price}}</text>
							<text>元起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
			<!-- 车辆item -->
<!-- 			<view @tap="goCar(item.id)" v-for="(item, index) in carType" :key="index" style="margin-bottom: 60rpx;">
				<image mode="aspectFill" :src="item.image" style="width: 702rpx;height: 246rpx;"></image>

				<view style="font-size: 28rpx;color: #333333;">{{ item.title }}</view>

				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					车辆标签
					<view style="display: flex;align-items: center;">
						<view
							style="height: 36rpx;padding-left: 19rpx;padding-right: 19rpx;border: 1px solid #4B9EFF;
						font-size: 20rpx;line-height: 36rpx;text-align: center; color: #4B9EFF;margin-right: 16rpx;"
							v-for="(item, index) in item.service"
							:key="index"
						>
							{{ item.name }}
						</view>
					</view>
					价格
					<view style="font-size: 32rpx;color: #F07203;">￥{{ item.price }}</view>
				</view>

				<view style="font-size: 22rpx;color: #808080;display: flex;justify-content: space-between;margin-top: 18rpx;">
					<view>厂商指导价: {{ item.original_price }}</view>
					<view>补贴后售价：{{ item.price }}</view>
					<view>销售量：{{ item.total_sales }}</view>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			width:0, //自适应宽
			page: 1,
			// 车型筛选
			carTableIndex: 0,
			//车座筛选
			seatTabIndex: 0,
			// 车辆类型筛选
			carStyleIndex: 0,
			// 上市时间排序 0 升序 1 倒序
			gettimesort: '',
			// 价格排序 0 升序 1 倒序
			pricesort: '',
			// 控制筛选数据传输，主要功能(展示全部)
			chexing_ids: '',
			all:'',
			newall:true,
			// 新车处理
			newcar:0,
			// 获取产品id
			// 所有分类 1看车2服务
			carid:'',
			carList: [],
			carTypeName:'',
			titleName: '', // 动态赋值
			titleName1: 1,
			// 座位新增
			allseat:
				{
					"id": 0,
					"name": "车型"
				},
			allseats:
				{
					"id": 0,
					"name": "全部"
				},
			carTableList: [
				{
					id: '',
					name: '不限'
				}
			],
			seatTableList: [
				{
					id: '',
					name: '不限'
				}
			],
			carStyleList: [],
			//车辆类型
			category_id:'',
			zuowei_ids:'',
			page:1
		};
		
	},
	onLoad() {
		this.getCatStyle();
		this.getCarNum();
		this.newall = true;
		this.carid = uni.getStorageSync('carid');
	},
	onShow() {
		this.carList =[]
		this.getInfoData();
		// this.titleName = uni.getStorageSync('titleName');
		// uni.removeStorageSync('titleName')
		this.category_id = uni.getStorageSync('cat_id'); 
		this.carid = uni.getStorageSync('carid');
		this.$forceUpdate();
		// this.newall = true;
		
		// this.carid = '';
		// this.category_id = uni.getStorageSync('cat_id');
		this.getCarList(0);
		// if (this.titleName !== '') {
		// 	this.titleName1 = 1
		// }
	},
	onHide(){
		uni.removeStorageSync({
			key:'carid'
		})
		this.newall = true;
		
		this.carid = '';
		// this.carid = uni.getStorageSync('carid');
	},
	created() {
		let _width = uni.getSystemInfoSync()
		this.width = _width.windowWidth
	},
	onReachBottom() {
		this.page++
		this.getCarList(0)
	},
	methods: {
		lower() {
			this.page = this.page + 1;
			this.getCarList(1);
		},
		//获得汽车列表
		async getCarList(type) {
			console.log('this.category_id,',this.category_id)
			try {
				let	res = await this.$request.get('addons/shopro/goods/lists', {
					data: {
						// category_id: 3,   // 车全部
						category_id: this.category_id ? this.category_id : 3,
						page: this.page,//页数
						gettimesort:  this.gettimesort, //上市时间排序:升序=0,降序=1(看车选填)
						pricesort: this.pricesort ? this.pricesort : '',//价格排序:升序=0,降序=1(看车选填)
						chexing_ids:  this.chexing_ids ? this.chexing_ids : '',//车型id(看车选填)
						zuowei_ids:  this.zuowei_ids,//座位id(看车选填)
					},
				});
				
				// this.carType = res.data.data.data;
				// 0表示初始化,1表示翻页
				if(type==0){
					this.carList = res.data.data.data;
				}else{
					this.carList = [...this.carList,...res.data.data.data]
				}
				
				console.log("res: ",res);
				
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
		},
		// 获得车型筛选数据
		async getCatStyle() {
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/chexing');
				this.carTableList = res.data.data;
				
				this.carTableList.unshift({
					id:0,
					name:'车型'
				});
				
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			
		},
		// 获得车辆座位筛选数据
		async getCarNum() {
			try {
				let	res = await this.$request.get('addons/shopro/goods/zuowei');
				this.seatTableList = res.data.data;
				this.seatTableList.unshift({
					id:0,
					name:'几座'
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			
		},
		//获取banner，菜单
		async getInfoData() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/index/template', {
					header: {
						platform: 'wxMiniProgram'
					}
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			//提取金刚区菜单
			this.carStyleList = res.data.data.home[2].content.list.slice(0, 3);
			// this.titleName = this.carStyleList[0].name;
			//默认型号名称的显示
			// this.carTypeName = this.carStyleList[0].name
			if(this.category_id == '' || this.category_id == null || this.category_id.length < 1){
				this.category_id = this.carStyleList[2].cat_id;
			}
			for(let i=0; i < this.carStyleList.length; i++){
				if(this.carStyleList[i].cat_id == this.category_id){
					this.carTypeName = this.carStyleList[i].name;
				}
			}
		},
		//修改车型筛选
		carTabChange(e) {
			this.carTableIndex = e.target.value;
			let ids = e.target.value;
			// this.category_id = 3
			if(ids === '0'){
				this.carid = '';
				this.chexing_ids = ''  // 使车型为空
				this.getCarList(0);
			} else if(ids !== '0') {
				this.chexing_ids = this.carTableList[ids].id;
				this.getCarList(0);
			}
		},
		//修改车座筛选
		carSeatTabChange(e) {
			this.seatTabIndex = e.target.value;
			let seat = e.target.value;
			// this.category_id = 3
			if(seat === '0'){
				this.carid = '';
				this.zuowei_ids = ''  // 使车座为空
				this.getCarList(0);
			} else if(seat !== '0') {
				this.zuowei_ids = this.seatTableList[seat].id;
				this.getCarList(0);
			}
		},
		
		//修改车辆类型(新车\二手车)筛选
		carStyleChange(e) {
			//重新设置类型筛选显示的名称
			this.carTypeName = this.carStyleList[e.target.value].name;
			//重新配置获取参数
			this.category_id = this.carStyleList[e.target.value].cat_id;
			//重新获取参数
			this.getCarList(0);
		},
		//修改上市时间排序
		changeTimeSort() {
			if(this.gettimesort != ''){
				this.gettimesort = this.gettimesort ^ 1;
			}else{
				this.gettimesort = 1;
			}
			this.getCarList(0);
		},
		//修改价格排序
		changePricesort() {
			if(this.pricesort != ''){
				this.pricesort = this.pricesort ^ 1;
			}else{
				this.pricesort = 1;
			}
			
			this.getCarList(0);
		},
		// 所有车
		changePricesortAll(){
			// this.all = true;
			this.newall = true;
			
			this.carid = '';
			this.getCarList(0);
		},
		goCar(id,path){
			this.$Router.push({
				name:path,
				params: {
					id: id,
					tt:1
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.look_car {
		position: relative;
		width: 702rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 18px 0px rgba(0, 52, 110, 0.06);
		border-radius: 10px;
		
		.look_car_con {
			width: 100%;
			height: 100%;
			overflow: hidden;
			.look_car_box {
				display: flex;
				height: 100%;
				padding: 33rpx 28rpx 27rpx 29rpx;
				width: 100%;
				.look_car_right {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					flex: 1;
					margin-left: 38rpx;
					padding: 18rpx 0 24rpx;
					>text:nth-of-type(1) {
						width: 375rpx;
						line-height: 1;
						color: #ccc;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.look_car_price {
						display: flex;
						align-items: center;
						color: #F07203;
						line-height: 1;
						text {
							&:first-child{
								font-size: 44rpx;
							}
							&:last-child{
								font-size: 28rpx;
								// margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}
	
</style>
